<template>
  <div>
    <div>
      num1:<input v-model.number="numObj.num1" style="width: 100px" /><br />
      num2:<input v-model.number="numObj.num2" style="width: 100px" />
    </div>
    <span>加法等于:{{ addNum }}</span>    <br />
    <span>减法等于:{{ subNum }}</span>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import useAdd from '@/hooks/useAdd'     //引入自动hook 
import { useSub } from '@/hooks/useSub' //引入自动hook 

const numObj = reactive({
  num1: 20,
  num2: 10
})
//加法功能-自定义Hook（将响应式变量或者方法形式暴露出来）
const { addNum, addFn } = useAdd(numObj)
addFn(numObj.num1, numObj.num2)
//减法功能-自定义Hook (将响应式变量或者方法形式暴露出来)
const { subNum, subFn } = useSub(numObj)
subFn(numObj.num1, numObj.num2)
</script>

<style scoped></style>
